<template>
  <div>
    <!-- 页面顶部-->
    <header id="top">
    </header>
    <div id="container">
      <div id="cover" class="rt">
        <form id="form-login">
          <div class="txt">
            <p>
              后台管理员登录
            </p>
            <div class="text">
              <input
                v-model="name"
                type="text"
                placeholder="请输入您的用户名"
                name="name"
                id="name"
                required
                :state="nameState"
                @blur="checkname"
              />
              <span
                ><img
                  src="http://www.codeboy.com:9999/img/login/yhm.png"
              /></span>
            </div>
            <div class="text">
              <input
              :state="pwdState"
                v-model="pwd"
                type="password"
                id="pwd"
                placeholder="请输入您的密码"
                name="pwd"
                required
                minlength="6"
                maxlength="15"
                @blur="checkpwd"
              />
              <span
                ><img
                  src="http://www.codeboy.com:9999/img/login/mm.png"
              /></span>
            </div>
            <input
              @click="userLogin"
              class="button_login"
              type="button"
              value="登录"
              id="bt-login"
            />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      pwd: '',
      nameState:'',
      pwdState:'',
    }
  },
  methods: {
    checkname() {
               if(this.name==''){
                this.nameState='warning' 
                return false
            }
            else if(/^\w{3,10}$/.test(this.name)){
                this.nameState='success'
                return true
            }else{
                this.nameState='error'
                return false
            }
            },
    checkpwd() {
                if (this.pwd == '') {
                    this.pwdState = 'warning'
                    return false
                }
                else if (/^\w{3,10}$/.test(this.pwd)) {
                    this.pwdState = 'success'
                    return true
                } else {
                    this.pwdState = 'error'
                    return false
                }
            },
    userLogin() {
      let url = 'dtb/admin/login'
      let params = `d_name=${this.name}&d_pwd=${this.pwd}`
            if (this.checkname() && this.checkpwd()) {
                let params = `d_name=${this.name}&d_pwd=${this.pwd}`
                this.axios.post(url, params).then(res => {
                    console.log(res)
                    // 登录成功后, 把用户名存储到共享的vuex里
                    if (res.data.code == 200) {
                        // 如何触发 vuex的mutations 中的方法????  commit
                        this.$store.commit('userLogin', this.name)
                        alert('登录成功! 即将为您跳转到首页')
                        this.$router.push('/admin')
                    } else {
                        alert('登录失败!')
                    }
                })

            }
  },
  }
}
</script>

<style lang="scss"scoped>
*{
    margin: 0;
    padding: 0;
}
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>